<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,uer-scalable=no">
<link rel="stylesheet" type="text/css" href="../xuehua/style.css">
<link rel="stylesheet" type="text/css" href="../xuehua/thumbs.css">
<link rel="stylesheet" type="text/css" href="../xuehua/jquery-ui.css">
</head>
<body>

<div class="detail-head">
    <div class="head-face">
        <img src="<s:property value='mmDetail.photoUrl' />" width="70" alt="">
    </div>
    <div class="head-name">
        <h2><s:property value='mmDetail.nickname' /></h2>
    	<span><s:property value='mmDetail.age' />岁, <s:property value='mmDetail.constellation' /></span>
        <div class="star<s:property value='mmDetail.star' /> score">
        <s:text name="format.number"><s:param value="mmDetail.starAvg" /></s:text>分
        </div>
    </div>
    <s:if test="null!=mmDetail.currLocation">
	<a href="#forBooking" id="book">帮我订座</a>
	</s:if>
</div><!-- #detail-head end -->

<div class="detail-info">
    <div class="info-wrap">
        <h4>当前位置</h4>
        <p>
        	<s:if test="null!=mmDetail.currLocation">
        		<s:property value='mmDetail.currLocation.poi' />
        	</s:if>
        	<s:else>
        		不在线
        	</s:else>
        </p>
    </div>
    <div class="info-wrap">
        <h4>个性签名</h4>
        <p><s:property value='mmDetail.introduce' /></p>
    </div>
    <div class="info-wrap">
        <h4>爱好</h4>
        <p><s:property value='mmDetail.hobby' /></p>
    </div>
    <!-- 
    <div class="info-wrap" style="height:80px">
        <h4>个人相册</h4>
        <div id="thumbs">
            <a href="http://static.hutiao.me/snow/huodong/photographer/history/01_s.jpg"><img src="http://static.hutiao.me/snow/huodong/photographer/history/01_400.jpg" width="60" alt=""></a>
            <a href="http://static.hutiao.me/snow/huodong/photographer/history/02_s.jpg"><img src="http://static.hutiao.me/snow/huodong/photographer/history/02_400.jpg" width="60" alt=""></a>
            <a href="http://static.hutiao.me/snow/huodong/photographer/history/06_s.jpg"><img src="http://static.hutiao.me/snow/huodong/photographer/history/06_400.jpg" width="60" alt=""></a>
            <a href="http://static.hutiao.me/snow/huodong/photographer/history/04_s.jpg"><img src="http://static.hutiao.me/snow/huodong/photographer/history/04_400.jpg" width="60" alt="" style="display:none"></a>
            <a href="http://static.hutiao.me/snow/huodong/photographer/history/05_s.jpg"><img src="http://static.hutiao.me/snow/huodong/photographer/history/05_400.jpg" width="60" alt="" style="display:none"></a>
        </div>
    </div>
     -->
</div><!-- #detail-info end -->

<div style="background-color:#f4f4f4;overflow:hidden">
    <div class="detail-star">
        <p>给MM打分</p>
        <a href="#forComment" id="review"><img src="../xuehua/rating.png" alt=""><a>
    </div><!-- #detail-star end -->
</div>

<s:iterator value="mmDetail.comments" id="comment">
<div class="detail-review">
	<div class="review-header"><img src="<s:property value='#comment.reviewerInfo.wxUserInfo.headimgurl64' />" width="50" alt=""></div>
	<div class="star<s:property value='#comment.star' /> score"></div>
	<!-- <a href="javascript:" class="close"></a> -->
	<h4><s:property value='#comment.reviewerInfo.wxUserInfo.nickname' /><span><s:date name="#comment.createTime" format="MM-dd HH:mm" /></span></h4>
	<div class="review-content"><s:property value='#comment.content' /></div>
</div><!-- #detail-review end -->
</s:iterator>

<div id="forBooking" class="form_overlay">
<s:form id="frmPrebook" action="#" theme="simple" role="form">
	<label>称呼：</label>
    <p><s:textfield key="book.custName" cssClass="inp" id="book_custName"  /></p>
	<label>手机：</label>
    <p><s:textfield key="book.custPhone" cssClass="inp" id="book_custPhone"  /></p>
    <label>用餐人数：</label>
    <p><input type="number" name="book.custNum" class="inp" id="book_custNum"></p>
    <label>到店时间：</label>
    <p><s:textfield key="book.arriTime" cssClass="inp" id="book_arriTime"  /></p>
    <s:hidden name="book.openId"></s:hidden>
    <s:hidden name="book.mmid"></s:hidden>
    <s:hidden name="book.mlid"></s:hidden>
    <s:hidden name="book.loca.poi"></s:hidden>
    <p><s:submit id="saveForm" value="提交" cssClass="btn" onclick="postPrebook()" /></p>
</s:form>
</div>


<div id="forComment" class="form_overlay">
<s:form id="frmComment" action="#" theme="simple" role="form">
    <label><img src="<s:property value='visitor.headimgurl64' />" width="40" valign="middle">&nbsp;<s:property value='visitor.nickname' /></label>
    <div id="star"></div>
    <label>评论：</label>
    <p><s:textarea key="comment.content" cssClass="simple" id="comment_content"  /></p>
    <s:hidden name="comment.starValue" value="3"></s:hidden>
    <s:hidden name="comment.reviewer"></s:hidden>
    <s:hidden name="comment.mmid"></s:hidden>
    <p><s:submit id="saveForm" value="提交" cssClass="btn" onclick="postComment()" /></p>
</s:form>
</div>


<script type="text/javascript" src="../xuehua/jquery.min.js"></script>
<script type="text/javascript" src="../xuehua/jquery-ui.min.js"></script>
<script type="text/javascript"  src="../xuehua/thumbs.js"></script>
<script type="text/javascript" src="../xuehua/raty.min.js"></script>
<script type="text/javascript" src="../xuehua/leanmodal.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script>

<script type="text/javascript">
$(function(){
  
	//http://testweb3.iecworld.com/jsdemo/js/lq_js_point/
	
	$("#star").raty({
		start: 3,
		showHalf: true,
		starOn: "../../xuehua/star-on.png",
		starOff: "../../xuehua/star-off.png",
		onClick: function(score) {
			//alert('score: ' + score);
			$("#frmComment_comment_starValue").val(score);
		}
	});
	
    /*$("#checkin" ).datepicker({
        yearRange: "-62:+0",
        dateFormat: "yy-mm-dd",
        dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
		onSelect: function() {
			$(this).val($(this).val() + " " + (new Date().getHours()+2) + ":00");
		}
    });*/
	
	$("#book").leanModal({
		top : 10
	});
	
	$("#review").leanModal({
		top : 100
	});
	
	$('#thumbs a').touchTouch();

});
</script>

<script type="text/javascript">

function postComment() {
	
	var content = $("#comment_content").val();
	if (content.length==0) {
		alert("请填写评论内容");
		return;
	}
	
	var mmid = "<s:property value='mmid' />";
	$("#frmComment_comment_mmid").val(mmid);
	var reviewer = "<s:property value='visitor.openId' />";
	$("#frmComment_comment_reviewer").val(reviewer);
	
	var params=$("#frmComment").formSerialize();
	params = decodeURIComponent(params,true);
	$.ajax({
		type:"POST",
		url: "./comment_post",
		dataType: "json",
		data: params,
		async: false,
		success: function(data) {
			if (data.result == "success") {
				alert("评论成功");
			} else {
				alert("抱歉，我们遇到一点问题，请稍后再试。");
			}
		},
		error: function(err) {
			alert("抱歉，我们遇到一点问题，请稍后再试。");
		}
	});
}

function postPrebook() {
	
	var custphone = $("#book_custPhone").val();
	var custnum = $("#book_custNum").val();
	
	if (custphone.length==0) {
		alert("请填写手机号");
		return;
	}
	if (custnum.length==0) {
		alert("请填写用餐人数");
		return;
	}
	if (isNaN(custphone)) {
		alert("手机号请填写数字");
		return;
	}
	if (isNaN(custnum)) {
		alert("用餐人数请填写数字");
		return;
	}
	
	var mmid = "<s:property value='mmid' />";
	$("#frmPrebook_book_mmid").val(mmid);
	var openId = "<s:property value='visitor.openId' />";
	$("#frmPrebook_book_openId").val(openId);
	var mlid = "<s:property value='mmDetail.currLocation.mlid' />";
	$("#frmPrebook_book_mlid").val(mlid);
	var poi = "<s:property value='mmDetail.currLocation.poi' />";
	$("#frmPrebook_book_loca_poi").val(poi);
	
	var params=$("#frmPrebook").formSerialize();
	params = decodeURIComponent(params,true);
	$.ajax({
		type:"POST",
		url: "./prebook",
		dataType: "json",
		data: params,
		async: false,
		success: function(data) {
			if (data.result == "success") {
				alert("订座信息提交成功");
			} else {
				alert("抱歉，我们遇到一点问题，请稍后再试。");
			}
		},
		error: function(err) {
			alert("抱歉，我们遇到一点问题，请稍后再试。");
		}
	});
	
}


</script>

</body>
</html>
